<template>
  <el-dialog v-model="option.openDialog" class="deepRegister"
             width="520px" :close-on-click-modal="false"
             draggable append-to-body destroy-on-close>

    <el-tabs v-model="option.tabActive">
      <el-tab-pane label="手机注册" name="1" style="font-size: 50px"></el-tab-pane>
      <el-tab-pane label="邮箱注册" name="2"></el-tab-pane>
    </el-tabs>

    <el-form ref="formDataRef" size="default" :model="formData" :rules="formRules" label-width="80">

      <el-form-item v-if="option.tabActive=='1'" label="手机号" prop="phone">
        <el-input v-model="formData.phone" size="large" auto-complete="off"
                  placeholder="请输入手机号" prefix-icon="Iphone">
        </el-input>
      </el-form-item>

      <el-form-item v-if="option.tabActive=='2'" label="邮箱" prop="email">
        <el-input v-model="formData.email" size="large" auto-complete="off"
                  placeholder="请输入邮箱" prefix-icon="Message">
        </el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input v-model="formData.password" type="password" show-password size="large" auto-complete="off"
                  placeholder="请输入密码" prefix-icon="Lock">
        </el-input>
      </el-form-item>

      <el-form-item label="确认密码" prop="password2">
        <el-input v-model="formData.password2" type="password" show-password size="large" auto-complete="off"
                  placeholder="再次输入密码" prefix-icon="Lock">
        </el-input>
      </el-form-item>

      <el-form-item label="验证码" prop="captcha">
        <el-input v-model="formData.captcha" size="large" auto-complete="off"
                  placeholder="验证码" prefix-icon="Lock">
          <template #append>
            <el-countdown style="font-size: 15px" v-if="option.isSend" format="s"
                          :value="option.codeTime " suffix="秒" @finish="option.isSend=false"/>
            <span @click="sendCaptcha" v-if="!option.isSend" class="pointer" style="color: #409EFF;">发送验证码</span>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item prop="isPrivacy">
        <el-checkbox v-model="option.isPrivacy" size="large"/>
        <span>我已阅读并同意
          <a :href="setting.privacyPolicy" target="_blank"> 服务协议 </a>
          和
          <a :href="setting.userAgreement" target="_blank">隐私条款</a>
        </span>
      </el-form-item>


    </el-form>

    <div class="fx_center_center pointer bt_bo01" @click="submitRegister">
      注册
    </div>

  </el-dialog>
</template>

<script setup>

import {getCurrentInstance, onMounted, ref} from "vue";
import {closeLoading, copyNew, loading} from "@/common/utils/kit";
import $modal from "@/common/utils/modal";
import {apiSysGetRegisterCaptcha, apiUserRegisterEmail, apiUserRegisterPhone} from "@/api/system";
import setting from "@/setting";
import {encrypt} from "@/common/utils/jsencrypt";

const {proxy} = getCurrentInstance();

let optionKey = {
  loading: false,
  tabActive: '2',
  captchaEnabled: true,
  dialogTitle: '',
  openDialog: true,
  codeTime: Date.now(),
  isSend: false,
  isPrivacy: false,
}

let formKey = {
  phone: "15144042132",
  email: "15144042132@qq.com",
  password: "123",
  password2: "123",
  captcha: "",
}

const formRules = {
  phone: [{required: true, trigger: "blur", message: "不能为空"}],
  email: [{required: true, trigger: "blur", message: "不能为空"}],
  password: [{required: true, trigger: "blur", message: "不能为空"}],
  password2: [{required: true, trigger: "blur", message: "不能为空"}],
  captcha: [{required: true, trigger: "blur", message: "不能为空"}],
};

const option = ref(optionKey);
const formData = ref(formKey);

function resetForm() {
  formData.value = copyNew(formKey);
}

onMounted(() => {
})

function submitRegister() {
  proxy.$refs["formDataRef"].validate(valid => {
    if (valid) {
      if (!option.value.isPrivacy) {
        $modal.warning("请阅读并勾选隐私协议");
        return;
      }
      loading("正在注册")
      formData.value.type = option.value.tabActive
      formData.value.expireTime = new Date().getTime() + 10000;
      let paramStr = encrypt(JSON.stringify(formData.value))
      let param = {email: formData.value.email, phone: formData.value.phone, paramStr: paramStr}

      if (option.value.tabActive == '1') {
        apiUserRegisterPhone(param).then(res => {
          if (res.success) {
            $modal.success("注册成功");
          }
          closeLoading()
          option.value.openDialog = false;
        })
      }

      if (option.value.tabActive == '2') {
        apiUserRegisterEmail(param).then(res => {
          if (res.success) {
            $modal.success("注册成功");
          }
          closeLoading()
          option.value.openDialog = false;
        })
      }

    } else {
      $modal.warning("表填填写存在错误！");
    }
  });
}

function sendCaptcha() {
  if (!formData.value.password || formData.value.password != formData.value.password2) {
    $modal.warning("请确保两次密码输入一致")
    return;
  }

  loading("正在发送验证码...")

  if (option.value.tabActive == '1') {
    $modal.info("暂未开放")
    closeLoading()
    return;
  }


  apiSysGetRegisterCaptcha({toEmail: formData.value.email}).then(res => {
    if (res.success) {
      option.value.codeTime = Date.now() + 60000
      option.value.isSend = true;
      $modal.success("验证码已发送，有效时间为10分钟，请注意查收。", 3000)
    }
    closeLoading()
  })
}

</script>

<style lang="less">
.deepRegister {
  padding: 16px 30px;

  .el-tabs__item {
    font-size: 16px;
  }

  .el-dialog__body {
    padding: 0 !important;
    margin: 0 !important;
  }

  .el-dialog__header {
    padding: 0 !important;
    margin: 0 !important;
  }

  .el-statistic__number {
    font-size: 14px;
    color: #777272;
  }

  .el-statistic__suffix {
    font-size: 14px;
    color: #777272;
  }

  .el-checkbox {
    margin: 0;
    margin-right: 5px;
  }
}

.bt_bo01 {
  margin-top: 50px;
  margin-bottom: 20px;
  background: #409EFF;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  color: #FFFFFF;
  padding: 10px 0;
}
</style>
